<template>
<el-form :model="form" class="form" :rules="rules" ref="form">
    <el-form-item prop="username">
        <el-input v-model="form.username" placeholder="用户名/手机" @focus="clearMsg('username')"></el-input>
    </el-form-item>
    <el-form-item prop="captcha">
        <el-input v-model="form.captcha" placeholder="验证码" @focus="clearMsg('captcha')">
            <template slot="append"><span @click="getCaptcha" style="cursor:pointer;">发送验证码</span></template>
        </el-input>
    </el-form-item>
    <el-form-item prop="nickname">
        <el-input v-model="form.nickname" placeholder="昵称" @focus="clearMsg('nickname')"></el-input>
    </el-form-item>
    <el-form-item prop="password">
        <el-input v-model="form.password" placeholder="密码" @focus="clearMsg('password')"></el-input>
    </el-form-item>
    <el-form-item prop="repass">
        <el-input v-model="form.repass" placeholder="确认密码" @focus="clearMsg('repass')"></el-input>
    </el-form-item>
    <div class="forget"><span @click="$message.warning('后续实现')">忘记密码</span></div>
    <el-button type="primary" @click="register">注册</el-button>
</el-form>
</template>

<script>
export default {
    data(){
        const repassValidator = (rule,value,callback) => {
            // 在一个校验函数内部, 可以接受三个参数
            // 1. 规则对象本身
            // 2. 当前输入的值
            // 3. 放行的回调函数
            // 当你校验完输入值的合法性, 需要调用 callback 继续下去
            // 我们在这里需要做的就是判断当前二次代码的输入值是否跟第一次一样
            // 不通过的情况下,需要在调用 callback 的时候, 传入一个错误对象
            // new Error('请再次输入密码')
            if(value == ''){
                callback(new Error('请输入密码'));
            }else if (value != this.form.password){
                callback(new Error('密码不一致'));
            }else{
                // 通过
                callback();
            }
        }
        return{
            form:{
                username:'',
                nickname:'',
                password:'',
                repass:'',
                captcha:''
            },
            rules:{
                username:[
                    {required:true,message:'请输入用户名/手机号',trigger:'blur'},
                    {min:6,max:15,message:'用户名/手机号在6~15个字符之间',trigger:'blur'},
                    {pattern:/^\d+$/,message:'用户名/手机号只能输入数字',trigger:'blur'}
                ],
                captcha:[
                    {required:true,message:'验证码不能为空',trigger:'blur'},
                ],
                nickname:[
                    {required:true,message:'验证码不能为空',trigger:'blur'}
                ],
                password:[
                    {required:true,message:'请输入密码',tigger:'blur'},
                    {pattern:/^\d{6}$/,message:'密码只能输入6位',trigger:'blur'}
                ],
                repass:[
                    // 如果我们需要自定义的函数,
                    // 对数据的输入进行校验,
                    // 就可以定义一个 validator 的属性
                    // 并且传入一个函数
                    // 将校验规则和报错信息都写在函数里面
                    {
                        validator: repassValidator,
                        trigger: 'blur'
                    }
                ] 
            }
        }
    },
    methods:{
        clearMsg(propName){
            // 如果拿到一个数据的 prop 名字
            // 就可以直接调用表单,来清理对应数据的错误信息
            // 当有验证的错误结果出来后，再点击输入框填写信息时验证的错误会消失
            this.$refs.form.clearValidate(propName);
        },
        getCaptcha(){
            if(!this.form.username){
                this.$message.warning('请输入手机号');
                return;
            }
            this.$axios({
                url:'/captchas',
                method:'post',
                data:{
                    'tel':this.form.username
                }
            }).then(res => {
                this.$alert(`验证码：${res.data.code}`,  {
                    confirmButtonText: '确定'
                });
            })
        },
        register(){
            // 剩余参数/属性 写法跟展开运算符一模一样
            // 但是实际作用刚好相反
            // 能很好的将参数分开，去除不必要的参数
            const {repass,...props} = this.form;
            this.$axios({
                url:'/accounts/register',
                method:'post',
                data:props
            }).then(res => {
                console.log(res);
                this.$store.commit('user/setUserInfo',res.data);
            })
        }
    }
}
</script>

<style lang="less" scoped>
.form{
    padding:26px;
}
.forget{
    padding-bottom:10px;
    text-align: right;
    font-size: 12px;
    color: #00A0FF;
}
.el-button--primary{
    width:100%;
}
</style>